<template>
	<view class="bg-gradient">
		<!-- 头部数据 -->
		<view class="head">
		</view>
		<!-- 订餐信息 -->
		<view class="order">
			<scroll-view scroll-y="true" class="items">
				<view class="item-food" v-for="(itemFood,index) in orderList">
					<view class="left-food">
						<image class="left-food-img text" :src="itemFood.picture"></image>
					</view>
					<view class="right-food">
						<view class="right-name" :title="itemFood.name">{{ itemFood.name }}</view>
						<uni-tag class="last-line" :type="getFoodType(itemFood.type)" :text="itemFood.type"></uni-tag>
						<uni-tag class="last-line" :type="getStatusType(itemFood.status)"
							:text="itemFood.status"></uni-tag>
						<view class="last-line">
							<view> {{ itemFood.createTime | formatDate }}</view>
						</view>
					</view>
				</view>
				<!-- </view> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		getRecordPageAPI
	} from "@/api/ordering/ordering.js"
	import {
		getDictListAPI
	} from "@/api/dict/dict.js"
	import {
		parseTime
	} from "@/utils/ruoyi"
	import {
		toast
	} from "@/utils/common"

	export default {
		data() {
			return {
				orderList: {},
				total: 0,
				params: {
					pageNo: 1,
					pageSize: 10
				}
			}
		},
		onLoad() {
			this.getList()
		},

		methods: {
			async getList() {
				// 修改时间格式
				getRecordPageAPI(this.params).then(response => {
					this.orderList = response.data.list
					this.total = response.data.total
					this.getDictList()
				})
			},
			getDictList() {
				getDictListAPI({
					'dictType': 'ordering_type'
				}).then(response => {
					this.orderTypeList = response.data
					if (this.orderTypeList && this.orderList) {
						this.orderList.forEach(order => {
							const item = this.orderTypeList.find(item => item.value === order.type)
							order.type = item ? item.label : '未知类型'
							if (order.status === 0) {
								order.status = '已订餐'
							} else if (order.status === 1) {
								order.status = '已送餐'
							} else if (order.status === 2) {
								order.status = '已取餐'
							} else if (order.status === 3) {
								order.status = '用户取消'
							} else if (order.status === 4) {
								order.status = '系统取消'
							} else {
								order.status = '未知'
							}
						})
					}
				})
			},
			// 处理餐品类型颜色值
			getFoodType(type) {
				if (type === '早餐') {
					return 'primary';
				} else if (type === '午餐') {
					return 'success';
				} else if (type === '晚餐') {
					return 'default';
				} else if (type === '宵夜') {
					return 'warning';
				} else {
					return 'royal';
				}
			},
			// 处理餐品状态颜色值
			getStatusType(type) {
				if (type === '已订餐') {
					return 'primary';
				} else if (type === '已送餐') {
					return 'success';
				} else if (type === '已取餐') {
					return 'warning';
				} else if (type === '用户取消') {
					return 'default';
				} else if (type === '系统取消') {
					return 'default';
				} else {
					return 'royal';
				}
			}
		},
		filters: {
			// 时间处理过滤器
			formatDate(value) {
				return parseTime(value, '{y}-{m}-{d}');
			},
		},
	}
</script>

<style lang="scss" scoped>
	/* 页面背景样式 */
	.bg-gradient {
		//宽度 100%
		width: 100%;
		// 最小高度 100vh
		min-height: 100vh;
		// 线性渐变 从blue颜色到rgba(0, 0, 0, 0),渐变区域为200px 

		background:
			// 顶层线性渐变 从上向下有透明渐变到白色，渐变区域为400px
			linear-gradient(to bottom, transparent, #fff 400px),
			// 第二层径向渐变（圆形渐变）半径最大90%宽度 半径最大300px 圆形位于左上角 渐变从#95E0DC到transparent
			radial-gradient(90% 300px at left top, #95E0DC, transparent),
			// 第二层径向渐变（圆形渐变）半径最大60%宽度 半径最大300px 圆形位于右上角 渐变从#D3CBFC到transparent
			radial-gradient(60% 300px at right top, #D3CBFC, transparent);
	}


	.head {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;

		>view {
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.order {
		height: 80vh;
		background: #fff;
		margin: 20rpx;
		border-radius: 20rpx;
	}

	.text {
		font-size: 30rpx;
		font-weight: bold;
		color: green;
	}


	.items {
		height: 90vh;
	}

	.item {
		margin: 20rpx 20rpx;
	}


	.item-food {
		display: flex;
		flex-direction: row;
		border-radius: 20rpx;
		background: #f6ffed;
		margin: 20rpx;

		.left-food {
			width: 220rpx;
			height: 220rpx;

			.left-food-img {
				border-radius: 20rpx;
				width: 100%;
				height: 100%;
			}
		}

		.right-food {
			margin: 20rpx;

			.right-name {
				font-size: 30rpx;
				font-weight: bold;
				color: green;
				margin: 0 0 30rpx 0;
			}

			.last-line {
				margin: 30rpx 20rpx 30rpx 0;
			}
		}
	}
</style>